<template>
  <div class="body" id="body">
    <div v-if="isLoading" class="loader-container">
      <div class="loader" id="loader">Loading...</div>
    </div>
    <div class="container" id="container">
      <div class="fjl">
        <div class="zfj gj" @click="dl1">
          <span class="infoTitle">公交</span>
          <div class="info" v-if="isGetDD">{{ this.maps[0].distance }}&nbsp;&nbsp;&nbsp;{{ this.maps[0].duration }}
          </div>
        </div>
        <div class="zfj qx" id="qx" @click="dl2">
          <span class="infoTitle">骑行</span>
          <div class="info" v-if="isGetDD">{{ this.maps[1].distance }}&nbsp;&nbsp;&nbsp;{{ this.maps[1].duration }}
          </div>
        </div>
        <div class="zfj bx" id="bx" @click="dl3">
          <span class="infoTitle">步行</span>
          <div class="info" v-if="isGetDD">{{ this.maps[2].distance }}&nbsp;&nbsp;&nbsp;{{ this.maps[2].duration }}
          </div>
        </div>
        <div class="zfj kc" @click="dl4">
          <span class="infoTitle">驾车</span>
          <div class="info" v-if="isGetDD">{{ this.maps[3].distance }}&nbsp;&nbsp;&nbsp;{{ this.maps[3].duration }}
          </div>
        </div>
      </div>
      <div class="dh">
        <div class="zk" id="zk1">
          <div id="map1" class="map"></div>
        </div>
        <div class="zk" id="zk2">
          <div id="map2" class="map"></div>
        </div>
        <div class="zk" id="zk3">
          <div id="map3" class="map"></div>
        </div>
        <div class="zk" id="zk4">
          <div id="map4" class="map"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { BMPGL } from '@/bmpgl';
import axios from 'axios';

export default {
  data() {
    return {
      ak: "7lZ559WeX7j6Fyg2ykx4U1rlsgK1RSJp",
      userId: this.$route.params.userId,
      scene: this.$route.params.scene,
      cityName: this.$route.params.city,
      userName:"",
      txUrl:
        "",
      preventD: null,
      sign: 1,
      start: null,
      end: null,
      middle: null,
      maps: [
        {
          map: null,
          routs: null,
          distance: null,
          duration: null
        },
        {
          map: null,
          routs: null,
          distance: null,
          duration: null
        },
        {
          map: null,
          routs: null,
          distance: null,
          duration: null
        },
        {
          map: null,
          routs: null,
          distance: null,
          duration: null
        }
      ],
      isGetDD: false,
      isLoading: true,
      showAllMap: true
    };
  },
  methods: {
    hqy() {
      let _this = this;
      const axios = require("axios");
      let data = JSON.stringify({
        "userID": _this.userId,
      });
      let config = {
        method: "post",
        maxBodyLength: Infinity,
        url: "http://8.134.215.31:11112/userMessage/get",
        headers: {
          "Content-Type": "application/json",
          "token": localStorage.getItem("JWT_TOKEN"),
        },
        data: data,
      };
      axios
        .request(config)
        .then((response) => {
          _this.userName = response.data.data.username;
          _this.txUrl = response.data.data.txUrl;
          const param1 = _this.userId;
          const param2 = _this.txUrl;
          const param3 = _this.$route.name;
          const param4 = _this.userName;
          _this.$emit("childEvent", { param1, param2, param3,param4 });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    dl(a) {
      if (a != null)
        a.style.backgroundColor = "white";
    },
    dl1() {
      this.dl(this.preventD);
      document.querySelector(".gj").style.backgroundColor = "rgba(74, 82, 89)";
      this.preventD = document.querySelector(".gj");
      this.sign = 1;
      this.changeMap();
    },
    dl2() {
      this.dl(this.preventD);
      document.querySelector(".qx").style.backgroundColor = "rgba(74, 82, 89)";
      this.preventD = document.querySelector(".qx");
      this.sign = 2;
      this.changeMap();
    },
    dl3() {
      this.dl(this.preventD);
      document.querySelector(".bx").style.backgroundColor = "rgba(74, 82, 89)";
      this.preventD = document.querySelector(".bx");
      this.sign = 3;
      this.changeMap();
    },
    dl4() {
      this.dl(this.preventD);
      document.querySelector(".kc").style.backgroundColor = "rgba(74, 82, 89)";
      this.preventD = document.querySelector(".kc");
      this.sign = 4;
      this.changeMap();
    },
    changeMap() {
      for (let i = 0; i < 4; i++) {
        document.getElementById("zk" + (i + 1)).style.display = "none";
      }
      document.getElementById("zk" + this.sign).style.display = "block";
      this.maps[this.sign - 1].map.setCenter(this.middle);
      this.maps[this.sign - 1].map.setViewport([this.start, this.end]);
      this.maps[this.sign - 1].map.reset();
      this.maps[this.sign - 1].map.resize();
      this.maps[this.sign - 1].routes.search(this.start, this.end);
    },
    showContainer() {
      this.isGetDD = true;
      this.isLoading = false;
      document.getElementById("body").style.height = "auto";
    },
    async initMap() {
      // 传入密钥获取地图回调。
      BMPGL(this.ak).then((BMapGL) => {
        for (let i = 0; i < 4; i++) {
          let mapId = "map" + (i + 1);
          // 创建地图实例
          let mp = new BMapGL.Map(mapId);
          this.maps[i].map = mp;
        }

        // 获取当前位置
        let geolocation = new BMapGL.Geolocation();
        let that = this;
        geolocation.getCurrentPosition(function (r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            if (that.cityName != r.address.city) {
              that.showAllMap = false;
              document.getElementById("qx").style.display = "none";
              document.getElementById("bx").style.display = "none";
              document.getElementById("zk2").style.display = "none";
              document.getElementById("zk3").style.display = "none";

            }
            that.start = new BMapGL.Point(r.point.lng, r.point.lat);
            console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
            // if (this.coordinate.latitude != "null" && this.coordinate.longitude != "null") {
            //   this.end = new BMapGL.Point(this.coordinate.longitude, this.coordinate.latitude);
            // } else {
            // let ls = new BMapGL.LocalSearch(that.cityName);
            // ls.enableFirstResultSelection(true);
            // ls.search(that.scene);
            // console.log(that.cityName, that.scene);
            // ls.setSearchCompleteCallback(function (rs) {
            //   if (ls.getStatus() == BMAP_STATUS_SUCCESS) {

            axios.request({
              method: 'get',
              maxBodyLength: Infinity,
              url: `https://restapi.amap.com/v5/place/text?keywords=${that.scene}&region=${that.cityName}&key=15db71050eb2c5659a33248b052f6fd8`,
              headers: {
                "Content-Type": "application/json",
              },
            })
              .then((response) => {
                const rs = response.data;
                const endP = rs.pois[0].location.split(",");
                that.end = new BMapGL.Point(endP[0], endP[1]);

                that.middle = new BMapGL.Point((that.start.lng + that.end.lng) / 2, (that.start.lat + that.end.lat) / 2);
                for (let i = 0; i < 4; i++) {
                  that.maps[i].map.setCenter(that.middle);
                  // 初始化地图，设置中心点坐标和地图级别
                  // that.maps[i].map.setViewport([that.start, that.end]);
                  //开启鼠标滚轮缩放
                  that.maps[i].map.enableScrollWheelZoom(true)
                }

                // // 公交路线规划
                that.maps[0].routes = new BMapGL.TransitRoute(that.maps[0].map, {
                  renderOptions: { map: that.maps[0].map, autoViewport: true },
                  onSearchComplete: function (results) {
                    that.maps[0].distance = (results.getPlan(0).getDistance(true));
                    that.maps[0].duration = (results.getPlan(0).getDuration(true));
                  }
                });
                that.maps[0].routes.search(that.start, that.end);

                console.log(that.showAllMap);
                // // 骑行路线规划 
                if (that.showAllMap) {
                  console.log(this.showAllMap);
                  that.maps[1].routes = new BMapGL.RidingRoute(that.maps[1].map, {
                    renderOptions: { map: that.maps[1].map, autoViewport: true },
                    onSearchComplete: function (results) {
                      that.maps[1].distance = (results.getPlan(0).getDistance(true));
                      that.maps[1].duration = (results.getPlan(0).getDuration(true));

                    }
                  });
                  that.maps[1].routes.search(that.start, that.end);

                  // 步行路线规划
                  that.maps[2].routes = new BMapGL.WalkingRoute(that.maps[2].map, {
                    renderOptions: { map: that.maps[2].map, autoViewport: true },
                    onSearchComplete: function (results) {
                      that.maps[2].distance = (results.getPlan(0).getDistance(true));
                      that.maps[2].duration = (results.getPlan(0).getDuration(true));

                    }
                  });
                  that.maps[2].routes.search(that.start, that.end);
                }


                // 驾车路线规划 
                that.maps[3].routes = new BMapGL.DrivingRoute(that.maps[3].map, {
                  renderOptions: { map: that.maps[3].map, autoViewport: true },
                  policy: BMAP_DRIVING_POLICY_FIRST_HIGHWAYS,
                  onSearchComplete: function (results) {
                    that.maps[3].distance = (results.getPlan(0).getDistance(true));
                    that.maps[3].duration = (results.getPlan(0).getDuration(true));
                  }
                });
                console.log(that.maps[3].routes);
                that.maps[3].routes.search(that.start, that.end);

                setTimeout(() => {
                  that.changeMap()
                  that.showContainer();
                }, 3000);
              })
              .catch((error) => {
                console.log(error);
              })

            // that.end = rs.getPoi(0).point;


          }
        })
      })
    }

  },
  mounted() {
    document.documentElement.scrollTop = 0;
    this.hqy();
    this.preventD = document.querySelector('.gj');
    this.preventD.style.backgroundColor = "rgba(74, 82, 89)";
    this.initMap();
  },
};
</script>
<style scoped>
.body {
  overflow: hidden;
  user-select: none;
  width: 70%;
  /* min-height: 1000px; */
  height: 90vh;
  margin: 0 auto;
}

.container {
  height: auto;
  margin: 8vh;
  /* display: none; */
}

.dh {
  width: 100%;
  margin: auto;
  /* background-color: pink; */
}

.fjl {
  width: 100%;
  height: 8vh;
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  box-sizing: border-box;
  border: 1px rgba(128, 128, 128, 0.646) solid;
  border-right-width: 0px;
  border-radius: 5px;
}

.zfj {
  flex: 1;
  height: 100%;
  border-right: 1px rgba(128, 128, 128, 0.646) solid;
  text-align: center;
  color: pink;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.zfj:hover {
  cursor: pointer;
}

.zk {
  box-sizing: border-box;
  width: 100%;
  height: 75vh;
  border: 1px rgba(128, 128, 128, 0.3) solid;
}

.map {
  height: 100%;
}

.infoTitle {
  font-size: 20px;
  height: auto;
  margin: 3px;
}

.info {
  font-size: 10px;
}

.loader-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
}

.loader {
  width: 250px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: helvetica, arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  color: #ce4233;
  letter-spacing: 0.2em;
}

.loader::before,
.loader::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: #ce4233;
  position: absolute;
  animation: load .7s infinite alternate ease-in-out;
}

.loader::before {
  top: 0;
}

.loader::after {
  bottom: 0;
}

@keyframes load {
  0% {
    left: 0;
    height: 30px;
    width: 15px
  }

  50% {
    height: 8px;
    width: 40px
  }

  100% {
    left: 235px;
    height: 30px;
    width: 15px
  }
}
</style>